<template>
  <div class="btns fx-h-c">
    <div class="wrap fx-h-c cs">
      <Expression></Expression>
      <Imgs></Imgs>
    </div>
    <a-button type="primary" @click="comment" :disabled="disabled"
      >评论</a-button
    >
  </div>
</template>

<script>
import Expression from "@/components/article-detail/comment/Expression";
import Imgs from "@/components/article-detail/comment/Imgs";
import { mapState } from "vuex";
import { comment } from "@/api/article";
import { resolveComment } from "@/utils/utils";
export default {
  name: "Btns",
  components: {
    Expression,
    Imgs,
  },
  props: {
    disabled: {
      type: Boolean,
      defalut: true,
    },
  },
  data() {
    return {
      imgUrl: "",
      content: "",
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  methods: {
    async comment() {
      this.$bus.$emit("getContent");
      Promise.resolve().then(async () => {
        if (this.content) {
          const articleId = this.$route.params.id;
          const res = await resolveComment(
            articleId,
            this.content,
            this.imgUrl,
            this.user._id,
            this
          );
          if (res.code == 1) {
            this.$message.success("评论成功!!");
            this.$bus.$emit("resetVal");
            this.$bus.$emit("getData");
          }
        } else {
          this.$message.error("内容还没有");
        }
      });
    },
  },
  created() {
    this.$bus.$on("commentImg", (url) => {
      this.imgUrl = url;
    });
    this.$bus.$on("receiveContent", (content) => {
      console.log("监听");
      console.log(content);
      this.content = content;
    });
  },
};
</script>

<style lang="scss" scoped>
.btns {
  justify-content: space-between;
  .wrap {
    color: #007fff;
  }
}
</style>